﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>系统登录 - 超市订单管理系统</title>
    <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body class="login_bg">
    <section class="loginBox">
        <header class="loginHeader">
            <h1>超市订单管理系统</h1>
        </header>
        <section class="loginCont">
	        <form action="view/index.html" class="loginForm">
				<div class="inputbox">
                    <label>用户名：</label>
					<input type="text" class="input-text" id="userCode" name="userCode" placeholder="请输入用户名" required/>
				</div>	
				<div class="inputbox">
                    <label>密码：</label>
                    <input type="password" id="userPassword" name="userPassword" placeholder="请输入密码" required/>
                </div>
                <div id="error"></div>
				<div class="subBtn">
                    <input type="submit" value="登录"/>
                    <input type="reset" value="重置"/>
                </div>	
			</form>
        </section>
    </section>

    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $("form").submit(function (){
            $.ajax({
                url:"userLogin",
                data:{
                    "userCode":$("#userCode").val(),
                    "userPassword":$("#userPassword").val()
                },
                dataType:"json",
                type:"post",
                success:function (result){
                    if (result.flag){
                        //登录成功
                        //存储用户名到本地
                        localStorage.userName=result.data.userName;
                        location.href="view/index.html";
                    }else {
                        $("#error").text(result.msg);
                    }
                },
                error:function (jqxhr){
                    alert("请求出错:"+jqxhr.status);
                }
            });
            //阻止表单自身的提交功能
            return false;
        });
    </script>
</body>
</html>
